<template>
  <a-modal
    title="选择账号"
    v-model:visible="openModal"
    unmount-on-close
    @cancel="emits('update:open', false)"
    title-align="start"
    :mask-closable="false"
    width="1000px"
  >
    <a-form :model="queryParams" ref="queryRef" layout="inline" class="mb-10px">
        <a-form-item label="姓名" field="realName">
          <a-input
            v-model="queryParams.realName"
            placeholder="请输入姓名"
            allow-clear
            style="width: 240px"
            @keyup.enter="handleQuery" />
        </a-form-item>
        <a-form-item label="手机号码" field="userName">
          <a-input
            v-model="queryParams.userName"
            placeholder="请输入手机号码"
            allow-clear
            style="width: 240px"
            @keyup.enter="handleQuery" />
        </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" icon="Search" @click="handleQuery"
            >搜索</a-button
          >
          <a-button @click="resetQuery">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-table
      :loading="loading"
      :columns="columns"
      :data="dataList"
      v-model:selected-keys="ids"
      row-key="userName"
      :row-selection="rowSelection"
      :pagination="{
        total: total,
        current: queryParams.pageNum,
        pageSize: queryParams.pageSize
      }"
      @page-change="tablePageChange"
    >
      <template #status="{ record }">
        <span>{{ record.status == 0 ? '启用' : '禁用' }}</span>
        </template>
    </a-table>
    <template #footer>
      <a-row justify="end">
        <a-space>
          <a-button @click="emits('update:open', false)">关闭</a-button>
          <a-button
            :disabled="multiple"
            type="primary"
            :loading="okLoading"
            @click="handleComfirn"
            >确定</a-button
          >
        </a-space>
      </a-row>
    </template>
  </a-modal>
</template>

<script setup name="SelectUser">
import { selectComUserList } from '@/api/shops'
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
})

const queryRef = ref(null)
const single = ref(true)
const multiple = ref(true)

const rowSelection = reactive({
  type: 'radio',
  showCheckedAll: true,
  onlyCurrent: true
})

const openModal = computed(() => {
  return props.open
})

const loading = ref(false)
const okLoading = ref(false)
const ids = ref([])

const total = ref(0)
const queryParams = ref({
  realName: '',
  userName: '',
  pageNum: 1,
  pageSize: 10
})

const emits = defineEmits(['callback', 'update:open'])

const columns = ref([
  {
    title: '序号',
    render: (data) => data.rowIndex + 1 // 添加序号
  },
  {
    title: '姓名',
    dataIndex: 'realName'
  },
  {
    title: '所属部门',
    dataIndex: 'departmentName'
  },
  {
    title: '手机号码',
    dataIndex: 'userName'
  },

  {
    title: '状态',
    slotName: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
])
const dataList = ref([])

watch(
  () => props.open,
  (newVal) => {
    okLoading.value = false
    if (newVal) {
      ids.value = []
      handleQuery()
    }
  }
)

watch(
  () => ids.value,
  () => {
    single.value = ids.value.length !== 1
    multiple.value = !ids.value.length
  }
)

/** 重置按钮操作 */
function resetQuery() {
  queryRef.value.resetFields()
  handleQuery()
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function getList() {
  ids.value = []
  loading.value = true
  selectComUserList({
    ...queryParams.value
  }).then((response) => {
    console.log(response)
    dataList.value = response.data.result.records
    total.value = response.data.resulttotal
    loading.value = false
  })
}

// 分页变化
function tablePageChange(pageNum) {
  queryParams.value.pageNum = pageNum
  getList()
}

function handleComfirn() {
  okLoading.value = true
  const selectedItems = dataList.value
    .filter((item) => ids.value.includes(item.userName))
    .map((item) => {
      return {
        username: item.userName,
        id: item.userId
      }
    })
  emits('callback', selectedItems[0])
  emits('update:open', false)
}
</script>

<style lang="scss" scoped></style>
